{%set axisSize = 100%}
{%set graphWidth = dataHandler.data|length * axisSize%}
{%set legendSize = ((dataHandler.max)/(dataHandler.title|length))%}

<div class="graphSvg">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="XminYmin meet" width="{{'%d'|format(width*0.8-10)}}" height="{{height}}"  viewBox="0 0 {{graphWidth}} {{dataHandler.max+60}}">
    {% block content %}
        {% for line in dataHandler.data %}
            {% include 'ComptaChartsBundle:Svg:barre.xml.twig' with {'pos':axisSize*loop.index0,'line':line,'colors':dataHandler.colors,'maxHeight':dataHandler.max}%}
            <text x="{{axisSize*loop.index0+axisSize/2}}" y="{{dataHandler.max+50}}" text-anchor="middle" style="font-size:40px;">{{dataHandler.axisLegend[loop.index0]}}</text>
        {% endfor %}
     {% endblock %}
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="XminYmin meet"  width="{{'%d'|format(width*0.2)}}"  height="{{height}}"  viewBox="0 0 300 {{dataHandler.title|length * 50}}">
    {% block legend %}
        {% for legend in dataHandler.title %}
            <rect x="0" y="{{loop.index0*50+5}}" width="40" height="40"  style=" fill:{{dataHandler.colors[loop.index0]}}; stroke:#fff"/>
            <text x="50" y="{{loop.index0*50+30}}" style="font-size:20px;">{{legend}}</text>
        {% endfor %}
     {% endblock %}
    </svg>
</div>